<template>
 <el-card class="box-card">
      <div slot="header" style="text-align:left">
          <span >权限菜单树</span>
          <el-button style="float: right; padding: 3px 0" @click="() => update(node, data,0)"  type="text">添加根节点</el-button>
      </div>
<div class="custom-tree-container">
  <div class="block">
    <el-tree :data="data"  node-key="id" :expand-on-click-node="false" >
      <span class="custom-tree-node" slot-scope="{ node, data }"   >
               <span > 
                   {{node.label}}
                </span>
                <span > 
                   {{data.url}}
                </span>
               <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() =>update(node, data,1)">
                  添加
                </el-button>
                <el-button 
                  type="text"
                  size="mini"
                  @click="() => update(node, data,2)">
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
                  删除
                </el-button>
              </span>
      </span>
    </el-tree>
  </div>
    <el-dialog title="编辑菜单" :visible.sync="dialog">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="名称"  >
               <el-input v-model="modifyParam.name"></el-input>
          </el-form-item>
           <el-form-item label="地址"  >
               <el-input v-model="modifyParam.url"></el-input>
          </el-form-item>
           <el-form-item label="排序" style="text-align:left" >
                <el-input-number v-model="modifyParam.orderList"  :min="1" :max="30" ></el-input-number>
          </el-form-item>
        </el-form>
          <div slot="footer" class="text-align:center">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="modify">确 定</el-button>
        </div>
      </el-dialog>
</div>
 </el-card>
</template>
<script>
  let id = 1000;
  import {menus,menusDele,menusModify} from "@/libs/api.js"

  export default {
    data() {
      return {
        data: [],
        dialog:false,
        doData:null,
        modifyParam:{"name":"","url":"","orderList":"0"}
      }
    },

    methods: {
      //flag=0添加跟节点，=1添加，=2修改
      update(node,data,flag) {
        if(data.name=="首页"){
          this.$util.errorMsg("首页不建议修改");
          return;
        }
         this.dialog=true;
         this.modifyParam={"name":"","url":"","orderList":"1"};
         this.doData=null;
        if(flag==2){//修改
          this.modifyParam.name=data.label;
          this.modifyParam.id=data.id;
          this.modifyParam.parentId=data.parentId;
          this.modifyParam.url=data.url;
          this.modifyParam.orderList=data.orderList;
          this.doData=data;
        }else if(flag==0){//添加根节点
            
        }else if(flag==1){//添加子节点
          this.modifyParam.parentId=data.id;
          this.doData=data;
        }
      },
      cancel(){
           this.dialog = false;
           this.modifyParam={"name":"","url":"","orderList":"0"}
      },
  
      modify(){
         menusModify(this.modifyParam).then((res) => {
            this.$util.success();
            this.dialog=false;
            const newChild = {orderList:res.orderList,parentId:res.parentId,id:res.id, label: this.modifyParam.name,url:this.modifyParam.url, children: [] }; 
            if(this.doData){//修改，或者添加子节点
              if(this.modifyParam.id){//修改
                  this.doData.label=this.modifyParam.name;
                  this.doData.name=this.modifyParam.name;
                  this.doData.url=this.modifyParam.url;
              }else{//添加子节点
                  let children=this.doData.children;
                  if (!children) {
                    this.$set(this.doData, 'children', []);
                     children.push(newChild);
                  }else{
                      var added = false;
                      for(var i=children.length-1;i>=0;i--){
                        if(children[i].orderList<res.orderList){
                             children.splice(i,0,newChild);
                             added=true;
                             break;
                        }
                      }
                      if(!added){
                         children.splice(0,0,newChild);
                      }
                  }
                 
              }
            }else{//添加根节点
                // this.data.push(newChild);
                   
                    if(this.data && this.data.length>0){
                       var added = false;
                        for(var i=this.data.length-1;i>=0;i--){
                          if(this.data[i].orderList<=res.orderList){
                                this.data.splice(i,0,newChild);
                                added=true;
                                break;
                          }
                        }
                        if(!added){
                            this.data.splice(0,0,newChild);
                        }
                    }else{
                      this.data=[];
                      this.data.push(newChild);
                    }
                 
            }
         })
      },

      remove(node, data) {
        if(data.name=="首页"){
          this.$util.errorMsg("首页不建议删除");
          return;
        }
         this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
                menusDele(data.id).then((res) => {
                  this.$util.success();
                  const parent = node.parent;
                  const children = parent.data.children || parent.data;
                  const index = children.findIndex(d => d.id === data.id);
                  children.splice(index, 1);
              })
          }).catch(() => {         
         });
        
       
      }
    },
    mounted(){
      menus().then((res) => {
         this.data=res;
      })
    },
  };
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>